<template>
  <div class="line-rank">
    <ai-main>
      <div class="line-rank-wrapper">
        <div class="move-table-panel">
          <ai-panel>
            <span slot="title" class="panel-title">
              {{ currMovelineDate | moveLineTitleParseTime }}
              <i slot="sub" class="sub" v-show="moveLineData.length">{{ '(TOP ' + moveLineData.length + '动线'}})</i>
            </span>
            <div slot="picker" class="picker">
              <el-date-picker align="right"
                              type="date"
                              placeholder="选择日期"
                              :picker-options="movelineDatePickerOption"
                              size="mini"
                              v-model="currMovelineDate"
                              class="data-picker-component"
                              :clearable="false"
                              @change="changeMoveLineDatePicker">
              </el-date-picker>
            </div>
            <div slot="content" class="content">
              <div class="table-wrapper">
                <el-table :data="moveLineData"
                          size="mini"
                          highlight-current-row
                          :row-style="{ height: '50px' }"
                          class="move-line-table">
                  <el-table-column width="138">
                    <template slot-scope="scope">{{ 'No.' + (scope.$index + 1) }}</template>
                  </el-table-column>
                  <el-table-column width="138"
                                  label="顾客人数">
                    <template slot-scope="scope">{{ scope.row.customer_num + ' 人' }}</template>
                  </el-table-column>
                  <el-table-column width="138"
                                  label="平均动线时长">
                    <template slot-scope="scope">{{ scope.row.avg_seconds | second2format }}</template>
                  </el-table-column>
                  <el-table-column prop="moveProcess">
                    <template slot-scope="scope">{{ scope.row.zone_path | moveLineFormat }}</template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="move-map-container" v-show="moveLineData.length">
                <el-tabs v-model="currTabsInx" class="move-map-tabs">
                  <el-tab-pane :label="`No.${inx + 1}`"
                              :name="String(inx)"
                              :key="inx"
                              v-for="(move, inx) in moveLineData">
                  </el-tab-pane>
                </el-tabs>
                <div class="move-map-wrapper">
                  <g-store-map :ad="mallMapData"
                               :adk="storeAreaData"
                               :scale="mallMapScale"
                               :data="currMLdata"
                               :isInit="true"
                               type="moveLine">
                  </g-store-map>
                </div>
              </div>
            </div>
          </ai-panel>
        </div>
      </div>
    </ai-main>
  </div>
</template>

<script type="text/ecmascript-6">
import Panel from '@/components/panel'
import Main from '@/components/main'
import StoreMap from '@/components/mallMap'
import { Row, Col, DatePicker, Table, TableColumn, Tabs, TabPane } from 'element-ui'
// import Zrender from 'zrender'
import Moment from 'moment'
// 过滤器 filters
import { heatMapParseTime } from '@/filters/compass/filters.js'
import { mapGetters } from 'vuex'

// api
import {
  APIGetMoveLineData
} from '@/api/trajectory.js'

const _isArray = require('lodash.isarray')

export default {
  name: 'lineRank',
  components: {
    // elementUI component
    elRow: Row,
    elCol: Col,
    elDatePicker: DatePicker,
    elTable: Table,
    elTableColumn: TableColumn,
    elTabs: Tabs,
    elTabPane: TabPane,
    gStoreMap: StoreMap,
    aiPanel: Panel,
    aiMain: Main
  },

  created () {
    this.APIGetMoveLineData()
  },

  data () {
    return {
      // 热力图时间选择器选项
      movelineDatePickerOption: {
        disabledDate (time) {
          return time.getTime() > Moment() || time.getTime() < Moment().subtract(1, 'year')
        },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', Moment())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = Moment().subtract(1, 'day')
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // 动线时间选择值
      currMovelineDate: Moment().format('YYYY-MM-DD'),
      // 动线数据
      currTabsInx: 0
    }
  },

  filters: {
    heatMapParseTime,
    moveLineTitleParseTime (moment) {
      return Moment(moment).format('YYYY-MM-DD')
    },
    second2format (second) {
      return `${Math.floor(second / (60 * 60))}时 ${Math.floor(second % (60 * 60) / 60)}分 ${second % (60 * 60) % 60}秒`
    },
    moveLineFormat (data) {
      if (data && _isArray(data)) {
        data = data.map(area => area.zone_name)
        return data.join(' -> ')
      } else {
        return '暂无数据'
      }
    }
  },

  computed: {
    ...mapGetters([
      'mallId',
      'mallMapData',
      'mallMapScale',
      'moveLineData'
    ]),
    storeAreaData () {
      let storeAreaData = {}
      this.mallMapData.forEach(item => { storeAreaData[item.id] = item })
      return storeAreaData
    },
    currMLdata () {
      const inx = Number.parseInt(this.currTabsInx)
      return this.moveLineData && this.moveLineData[inx] ? this.moveLineData[inx]['zone_path'] : []
    }
  },

  methods: {
    changeMoveLineDatePicker (date) {
      const pickertime = Moment(date).format('YYYY-MM-DD')
      this.APIGetMoveLineData(pickertime)
    },
    // get data api
    APIGetMoveLineData (date) {
      APIGetMoveLineData({ shop: this.mallId, date })
        .then((res) => {
          this.$store.dispatch('commitMoveLineData', res.data.lines)
          this.currTabsInx = '0'
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .line-rank {
    .line-rank-wrapper {
      .move-table-panel {
        .panel-title {
          .sub {
            margin-left: 5px;
            color: #888;
            font-size: 12px !important;
            font-style: normal;
          }
        }
        .picker {
          .data-picker-component {
            float: right;
            width: 100%;
            max-width: 220px;
          }
        }
        .content {
          .move-map-container {
            margin-top: 20px;
            width: 100%;
            .move-map-groups {
              position: relative;
              width: 100%;
              height: 100%;
              .move-map-bg, .move-map-canvas {
                position: absolute;
                // top: 50%;
                left: 50%;
                transform: translateX(-50%);
                width: 962px;
                height: 640px;
              }
            }
          }
        }
      }
      .move-map-wrapper {
        padding: 20px 0;
        width: 100%;
        background-color:  #171c37;
      }
    }
  }
</style>
